<template>
  <div>
    <!-- 顶部tab栏 -->
    <div class="title">
      <p
        v-for="(item, index) in tabTitle.value"
        :key="index"
        tag="li"
        :class="['title-txt', index == currentIndex ? 'firstClass' : '']"
        @click="switchTab(item.path, index)"
      >
        {{ item.tab }}
      </p>
    </div>
    <!-- 主题内容/文章详情/新建 -->
    <router-view></router-view>
    <!-- 页码 -->
    <div class="pagination">
      <Pagination v-show="Pagination.data.value"></Pagination>
    </div>
  </div>
</template>

<script>
//依赖
// import { ref, reactive, created, watch, filters, computed } from 'vue'
//分页
import Pagination from '@/components/CNode/Pagination.vue'
// console.log(Pagination);
//tab栏目模块
import { handleTab } from '@/modules/cnode/handleTab'
export default {
  data() {
    return {
      val: [],
    }
  },
  components: {
    Pagination,
  },
  props: {
    datas: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    const { tabTitle, currentIndex, Pagination, switchTab } = handleTab()
    return {
      tabTitle,
      currentIndex,
      Pagination,
      switchTab,
    }
  },
}
</script>

<style lang="scss">
@import '@/global.scss';

.title {
  width: 100;
  height: 5vh;
  background: rgb(235, 235, 235);
  color: #fff;
  @extend .disPlaybox;

  .title-txt {
    margin: 0 8px;
    padding: 4px 6px;
    box-sizing: border-box;
    height: 28px;
    text-align: center;
    font-size: 14px;
    border-radius: 3px;
    color: #76c263;
    text-decoration: none;

    &:hover {
      color: darkgreen;
    }
  }

  .firstClass {
    background: rgb(85, 190, 102);
    color: #fff;
  }
}

.pagination {
  margin: 0 auto;
}
</style>
